import { useRef } from 'react'
import { useInViewport } from 'ahooks'
import styles from './index.module.less'
import type { SwiperItemProps, TeacherReportData } from '../../interface'

interface Props
    extends SwiperItemProps,
        Pick<TeacherReportData, 'degree_student_module' | 'category_student_module'> {}

export const SixthPage = (props: Props) => {
    const degreeData = props.degree_student_module
    const categoryData = props.category_student_module

    const isActive = props?.current === props?.itemIndex
    const ref = useRef<HTMLDivElement>(null)
    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })
    if (!isActive && !inViewport) {
        return <div className={styles.page} />
    }

    return (
        <div className={styles.page} ref={ref}>
            <div className={styles.peopleImage} />

            <div className={styles.page_top}>
                <div className={styles.page_top_content}>
                    <p>茫茫人海之中</p>
                    <p>他们与您有种莫名的缘分</p>
                    <p>
                        <span>{categoryData?.category || ''}</span>
                    </p>
                    <p>
                        共<span>{categoryData?.student_num || 0}</span>人
                    </p>
                    <p>
                        是参训学员类型中最多的，占比
                        <span>{categoryData?.student_percent || '0%'}</span>
                    </p>
                </div>
            </div>

            <div className={styles.page_bottom}>
                <div className={styles.page_bottom_content}>
                    <p>虽然他们来自五湖四海</p>
                    <p>他们有一个共同的身份</p>
                    <p>
                        <span>{degreeData?.degree || ''}</span>
                    </p>
                    <p>
                        共<span>{degreeData?.student_num || 0}</span>人
                    </p>
                    <p>
                        是参训学员文化程度中最多的，占比
                        <span>{degreeData?.student_degree_percent || '0%'}</span>
                    </p>
                </div>
            </div>
        </div>
    )
}

export default SixthPage
